<template>
  <div 
    v-if="!isHidden" 
    class="ad-slot relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden"
    :class="slotClasses"
  >
    <!-- 广告标识 -->
    <div class="absolute top-2 right-2 text-xs text-gray-400 bg-white/80 dark:bg-gray-900/80 px-2 py-1 rounded">
      广告
    </div>

    <!-- 广告内容 -->
    <div v-if="adData" class="h-full flex items-center justify-center p-4">
      <a 
        v-if="adData.url"
        :href="adData.url" 
        target="_blank" 
        rel="noopener noreferrer sponsored"
        class="block w-full h-full"
        @click="trackClick"
      >
        <img 
          v-if="adData.image" 
          :src="adData.image" 
          :alt="adData.title || '广告'"
          class="w-full h-full object-cover rounded"
        />
        <div v-else class="text-center">
          <h3 v-if="adData.title" class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
            {{ adData.title }}
          </h3>
          <p v-if="adData.description" class="text-sm text-gray-600 dark:text-gray-400">
            {{ adData.description }}
          </p>
        </div>
      </a>
      <div v-else class="text-center w-full">
        <img 
          v-if="adData.image" 
          :src="adData.image" 
          :alt="adData.title || '广告'"
          class="w-full h-full object-cover rounded"
        />
        <div v-else>
          <h3 v-if="adData.title" class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
            {{ adData.title }}
          </h3>
          <p v-if="adData.description" class="text-sm text-gray-600 dark:text-gray-400">
            {{ adData.description }}
          </p>
        </div>
      </div>
    </div>

    <!-- 占位内容 -->
    <div v-else class="h-full flex items-center justify-center p-8">
      <div class="text-center">
        <Icon name="heroicons:megaphone" class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-2" />
        <p class="text-sm text-gray-400 dark:text-gray-500">广告位招商中</p>
        <a href="mailto:ad@devtoolshub.com" class="text-xs text-blue-500 hover:underline">
          联系投放
        </a>
      </div>
    </div>

    <!-- 关闭按钮 (可选) -->
    <button 
      v-if="closeable"
      @click="closeAd"
      class="absolute top-2 left-2 w-6 h-6 bg-gray-900/60 hover:bg-gray-900/80 rounded-full flex items-center justify-center text-white transition-colors"
      aria-label="关闭广告"
    >
      <Icon name="heroicons:x-mark" class="w-4 h-4" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface AdData {
  id?: string
  title?: string
  description?: string
  image?: string
  url?: string
}

interface Props {
  position: 'banner' | 'sidebar' | 'inline' | 'footer'
  adData?: AdData
  closeable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  position: 'sidebar',
  closeable: false
})

const isHidden = ref(false)

const slotClasses = computed(() => {
  switch (props.position) {
    case 'banner':
      return 'w-full h-24 md:h-32'
    case 'sidebar':
      return 'w-full h-64'
    case 'inline':
      return 'w-full h-48'
    case 'footer':
      return 'w-full h-20'
    default:
      return 'w-full h-64'
  }
})

const closeAd = () => {
  isHidden.value = true
  // 可以保存到 localStorage，避免重复显示
  if (props.adData?.id) {
    localStorage.setItem(`ad-closed-${props.adData.id}`, Date.now().toString())
  }
}

const trackClick = () => {
  // 追踪广告点击
  if (props.adData?.id) {
    // 这里可以调用分析API
    console.log('广告点击:', props.adData.id)
  }
}
</script>

<style scoped>
.ad-slot {
  transition: all 0.3s ease;
}
</style>

